<template>
	<view>
		<view class="lineGray"></view>
		<view v-show="openType==1" class="line-no textTab bold  ">
			<view @click="changeCategory(1)">
				<view class="padding"><text>全部</text></view>
				<view v-show="tabIndexCategory==1" class="line-blue-large margin-left-right">
				</view>
			</view>
			<view @click="changeCategory(2)" class="marginLeft">
				<view class="padding"><text>合集</text></view>
				<view v-show="tabIndexCategory==2" class="line-blue-large margin-left-right">
				</view>
			</view>
		</view>
		<view class="lineGray margin-top-0"></view>

		<view v-show="tabIndexCategory==1">
			<view class="line-no padding">
				<view class="bg-input-line-small padding-small-3 lineStart bigEmpty"><input @input="descInput($event)"
						v-model="nameKey" class="width100 marginLeft" placeholder="搜索画质描述" /></view>
				<view class="bg-input-line-small marginLeft padding-small-3 line" style="width:180rpx"
					@click="showDialogCategroy=true">筛选</view>
				<view class="bg-input-line-small marginLeft padding-small-3 line" style="width:220rpx"
					v-show="openType==1" @click="seleted()">
					选择内容</view>
			</view>
			<view class="line marginTop" v-show="selectMode">
				<view class="inputContent1 marginLeft padding-small-3" @click="showAddDialog()">加入合集</view>
				<view class="inputContent1 marginLeft padding-small-3" @click="save()">保存相册</view>
			</view>

			<view class="flex-line-center-in-line padding">

				<view class="bigEmpty image-box">
					<view class="marginBottom" v-for="(item,index) in list1 " :key="index" @click="clickItem(item)">

						<view :class="{marginBoxTop:selectMode}">
							<image class="image-content" :src="item.path"></image>
						</view>
						<view v-show="selectMode" class="line box-top">
							<view class="bigEmpty">
							</view>
							<view>
								<image v-show="item.selected" style="z-index: 12;" class="icon-small margin"
									src="../../static/icon-seleted.png"></image>
								<image v-show="!item.selected" style="z-index: 12;" class="icon-small margin"
									src="../../static/icon-unseleted.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="bigEmpty marginLeft image-box ">
					<view class="marginBottom" v-for="(item,index) in list2 " :key="index" @click="clickItem(item)">

						<view :class="{marginBoxTop:selectMode}">
							<image class="image-content" :src="item.path"></image>
						</view>

						<view v-show="selectMode" class="line box-top" style="z-index: 100;">
							<view class="bigEmpty">
							</view>
							<view>
								<image v-show="item.selected" style="z-index: 100;" class="icon-small margin"
									src="../../static/icon-seleted.png"></image>
								<image v-show="!item.selected" style="z-index: 100;" class="icon-small margin"
									src="../../static/icon-unseleted.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="bigEmpty marginLeft image-box">
					<view class="marginBottom" v-for="(item,index) in list3 " :key="index" @click="clickItem(item)">


						<view :class="{marginBoxTop:selectMode}">
							<image class="image-content" :src="item.path"></image>
						</view>

						<view v-show="selectMode" class="line box-top" style="z-index: 16;">

							<view class="bigEmpty">
							</view>
							<view>
								<image v-show="item.selected" style="z-index: 16;" class="icon-small margin"
									src="../../static/icon-seleted.png"></image>
								<image v-show="!item.selected" style="z-index: 16;" class="icon-small margin"
									src="../../static/icon-unseleted.png"></image>
							</view>
						</view>

					</view>
				</view>

			</view>
			<view v-show="openType==2"><button @click="selectPhoto()">去相册选择</button> </view>
		</view>



		<view class="centerGroup dialogBg" v-show="showDialog">
			<view class="itemGroup dialog padding">

				<view class="centerGroup textBlack18"> 选择合集</view>
				<view class="column marginTop">
					<view class="padding" v-for="(item ,index) in groupList" @click="addGroup(item)">
						{{item.name}}
					</view>
				</view>

				<view class="centerGroup marginTop">
					<view class="centerGroup canle textblack14" @click="canleDialog">取消</view>
					<view class="centerGroup ok marginLeft textwhite14" @click="okDialog"> 新建合集</view>
				</view>
			</view>
		</view>

		<view class="centerGroup dialogBg " v-show="showDialogCategroy">
			<view class=" dialog-bottom-full-width padding text-light-black-14">
				<view class="line textBlack18 padding ">
					<view class="bigEmpty marginLeft bold">尺寸大小</view>
					<view class="centerGroup marginRight textblack14" @click="canleDialog1">X</view>
				</view>

				<view class="line marginTop marginLeft marginRight ">
					<view class="bigEmpty marginLeft bg-gray-line-gray line button-round "
						:class="{'bg-gray-line-blue':sizeTab1Index==1}" @click="size1Change(1)">1:1</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line marginRight button-round"
						:class="{'bg-gray-line-blue':sizeTab1Index==2}" @click="size1Change(2)">1:2</view>
				</view>
				<view class="line marginTop marginLeft marginRight ">
					<view class="bigEmpty marginLeft bg-gray-line-gray line button-round "
						:class="{'bg-gray-line-blue':sizeTab1Index==3}" @click="size1Change(3)">4:3</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line marginRight button-round"
						:class="{'bg-gray-line-blue':sizeTab1Index==4}" @click="size1Change(4)">3:4</view>
				</view>
				<view class="line marginTop marginLeft marginRight ">
					<view class="bigEmpty marginLeft bg-gray-line-gray line button-round "
						:class="{'bg-gray-line-blue':sizeTab1Index==5}" @click="size1Change(5)">16:9</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line marginRight button-round"
						:class="{'bg-gray-line-blue':sizeTab1Index==6}" @click="size1Change(6)">9:16</view>
				</view>
				<view class="lineGray margin"></view>

				<view class="line textBlack18 padding ">
					<view class="bigEmpty marginLeft bold">模型选择</view>
				</view>

				<view class="line marginTop marginLeft marginRight ">
					<view class="bigEmpty marginLeft bg-gray-line-gray line button-round "
						:class="{'bg-gray-line-blue':moduleIndex==4}" @click="size1Change(1)">精彩</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line  button-round"
						:class="{'bg-gray-line-blue':moduleIndex==5}" @click="size1Change(5)">细腻</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line marginRight button-round"
						:class="{'bg-gray-line-blue':moduleIndex==6}" @click="size1Change(6)">细腻</view>
				</view>
				<view class="line marginTop marginLeft marginRight ">
					<view class="bigEmpty marginLeft bg-gray-line-gray line button-round "
						:class="{'bg-gray-line-blue':moduleIndex==7}" @click="size1Change(7)">动漫</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line  button-round"
						:class="{'bg-gray-line-blue':moduleIndex==8}" @click="size1Change(8)">创意</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line marginRight button-round"
						:class="{'bg-gray-line-blue':moduleIndex==9}" @click="size1Change(9)">照片</view>
				</view>

				<view class="lineGray margin"></view>

				<view class="line textBlack18 padding ">
					<view class="bigEmpty marginLeft bold">发布状态</view>
				</view>

				<view class="line marginTop marginLeft marginRight ">
					<view class="bigEmpty marginLeft bg-gray-line-gray line button-round "
						:class="{'bg-gray-line-blue':stateIndex==1}" @click="stateChange(1)">已发布</view>
					<view class="bigEmpty marginLeft bg-gray-line-gray line marginRight button-round"
						:class="{'bg-gray-line-blue':stateIndex==2}" @click="stateChange(2)">未发布</view>
				</view>
				<view class="lineGray margin"></view>
				<view class="centerGroup marginTop">
					<view class="centerGroup canle textblack14" @click="canleDialog">取消</view>
					<view class="centerGroup ok marginLeft textwhite14" @click="okDialog1">确认</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import request from '/common/request.js';
	export default {
		data() {
			return {
				nameKey: "",
				moduleIndex: 4,
				stateIndex: 1,
				sizeTab1Index: 1,
				tabIndexCategory: 1,
				showDialog: false,
				showDialogCategroy: false,
				list1: [],
				list2: [],
				list3: [],
				loading: false,
				loading4: false,
				page: 0,
				selectMode: false,
				openType: "1",
				groupList: []
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onReady: function() {
			this.requstData();
		},
		onLoad(query) {
			this.openType = query.openType
			this.requstData();
			this.requstGroupData()
		},
		onUnload() {

		},
		onReachBottom() {
			console.log('onReachBottom');
			this.requstData();
		},
		onPullDownRefresh() {
			this.list1 = [];
			this.list2 = [];
			this.list3 = [];
			console.log('onPullDownRefresh');
			this.requstData();
		},
		methods: {
			selectPhoto: function() {

				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {

						uni.$emit('add', {
							data: res.tempFilePaths[0]
						})
						uni.navigateBack()

						console.log(JSON.stringify(res.tempFilePaths));
					}
				});

			},
			descInput: function(e) {
				console.log(e)
				this.page = 0
				this.list1 = [];
				this.list2 = [];
				this.list3 = [];
				console.log('onPullDownRefresh');
				this.requstData();
				// this.remnant = e.detail.value
			},

			size1Change(num) {
				this.sizeTab1Index = num;
			},
			stateChange(num) {
				this.stateIndex = num;
			},

			changeCategory(num) {
				switch (num) {
					case 1:
						this.tabIndexCategory = num;
						break;
					case 2:
						this.tabIndexCategory = num;
						break;

				}
			},

			showAddDialog() {
				this.showDialog = true;
			},
			requstGroupData() {
				const that = this;
				if (that.loading4) {
					return
				}
				that.loading4 = true;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/mine";
				request(url, "GET", {
						orderType: 1,
						type: 4
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调post', res)
						that.page4 = that.page4 + 1;
						that.loading4 = false;
						that.groupList = res.data;

					}, function(err) {
						console.log('返回错误回调', err)
						that.loading4 = false;
					})
			},

			save() {

				var list = [];
				for (var i = 0; i < this.list1.length; i++) {
					var item = this.list1[i];
					if (item.selected) {
						list.push(item)
					}
					item.selected = false
				}
				for (var i = 0; i < this.list2.length; i++) {
					var item = this.list2[i];
					if (item.selected) {
						list.push(item)
					}
					item.selected = false
				}
				for (var i = 0; i < this.list3.length; i++) {
					var item = this.list3[i];
					if (item.selected) {
						list.push(item)
					}
					item.selected = false
				}
				this.selectMode = false
				console.log(list)
				for(var i=0;i<list.length;i++){
					console.log("list:")
					console.log(list[i].path)
					console.log("list:")
					console.log(list[i])
					uni.downloadFile({
						url: list[i].path,
						success: res => {
							if (res.statusCode === 200) {
								//图片
								// 图片保存到手机相册
								console.log(res.tempFilePath)
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											title: '保存成功',
											icon: 'none',
											duration: 2000,
											mask: true
										});
									},
									fail: function() {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							} else {
								uni.showToast({
									title: '下载失败',
									icon: "none"
								})
							}
						},
						fail: (err) => {
					
							uni.showToast({
								icon: "none",
								mask: true,
								title: '下载失败'
							})
						}
					})
					
				}
				

			},

			addGroup(item) {
				this.showDialog = false;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/addGroup/" + item.id;
				var list = [];
				for (var i = 0; i < this.list1.length; i++) {
					var item = this.list1[i];
					if (item.selected) {
						list.push(item)
					}
					item.selected = false
				}
				for (var i = 0; i < this.list2.length; i++) {
					var item = this.list2[i];
					if (item.selected) {
						list.push(item)
					}
					item.selected = false
				}
				for (var i = 0; i < this.list3.length; i++) {
					var item = this.list3[i];
					if (item.selected) {
						list.push(item)
					}
					item.selected = false
				}
				this.selectMode = false

				request(url, "PUT", list, uni.getStorageSync("token"))
					.then(function(res) {
						uni.showToast({
							title: "操作成功"
						})
						console.log('返回正确回调', res)
					}, function(err) {

						console.log('返回错误回调', err)
					})
			},
			okDialog1() {
				this.showDialogCategroy = false;

			},
			canleDialog1() {
				this.showDialogCategroy = false;
			},
			okDialog() {
				this.showDialog = false;
				uni.switchTab({
					url: "/pages/Find/Find"
				})
			},
			canleDialog() {
				this.showDialog = false;
			},
			seleted() {
				this.selectMode = !this.selectMode;
				console.log(this.selectMode)
			},
			clickItem(item) {
				if (this.selectMode) {
					//this.$set(this.buycargoodslists[i], "isChecked", true);
					item.selected = !item.selected
					return
				}
				if ("2" == this.openType || this.openType == 4) {
					console.log(item.path)
					uni.$emit('add', {
						data: item.path
					})
					uni.navigateBack()
					return;
				}
				var job = item.job;
				const that = this
				var size = "1:1";
				var sizeArray = [
					"1:1",
					"1:1",
					"1:2",
					"4:3",
					"3:4",
					"16:9",
					"9:16"
				]
				size = sizeArray[job.width2height]
				var module = "精彩"
				var moduleArray = [
					"1:1",
					"1:1",
					"1:2",
					"1:2",
					"精彩",
					"细腻",
					"动漫",
					"创意",
					"照片"
				]
				module = moduleArray[job.module]
				var style = "长焦镜头"
				var styleArray = [
					"长焦镜头",
					"长焦镜头",
					"手绘背景",
					"CG数字渲染",
					"哑光颜",
					"X光片",
					"矢量设计海报",
					"极简线条画",
					"炭笔画",
					"更多"
				]
				style = styleArray[job.style]

				if ("3" == this.openType) {
					var url3 =
						"/pages/PublishPicture/PublishPicture?id=" +
						job.id + '&goodContent=' + job.cmd + '&moduleIndex=' +
						job.module +
						'&styleIndex=' +
						job.style + "&sizeTab2Index=" +
						0 + "&sizeTab1Index=" + job.width2height +
						"&createTime=" + job.createTime +
						"&size=" + size +
						"&style=" + style +
						"&badContent=" + that.badContent +
						"&image=" + item.path +
						"&module=" + module
					uni.navigateTo({
						url: url3
					})
					return
				}

				var url1 =
					"/pages/CreatePictureResult/CreatePictureResult?id=" +
					job.id + '&goodContent=' + job.cmd + '&moduleIndex=' +
					job.module +
					'&styleIndex=' +
					job.style + "&sizeTab1Index=" + job.width2height +
					"&createTime=" + job.createTime +
					"&size=" + size +
					"&style=" + style +
					"&badContent=" + "" +
					"&module=" + module
				uni.navigateTo({
					url: url1
				})
			},
			requstData() {
				console.log('requstData');
				const that = this;
				if (that.loading) {
					return
				}
				var cmd = '';
				if (this.nameKey) {
					cmd = this.nameKey
				}
				that.loading = true;
				const url = getApp().globalData.apiUrl + "/api/v1/myphoto/mine";
				request(url, "GET", {
						page: that.page,
						cmd: cmd
					}, uni.getStorageSync("token"))
					.then(function(res) {
						uni.stopPullDownRefresh()
						console.log('返回正确回调', res)
						that.page = that.page + 1;
						that.loading = false;
						var num = that.list1.length + that.list2.length + that.list3.length;
						for (var i = 0; i < res.data.length; i++) {
							var item = res.data[i]

							that.$set(item, "selected", false);

							if (num % 3 == 0) {
								that.list1.push(item);
							} else if (num % 3 == 1) {
								that.list2.push(item);
							} else {
								that.list3.push(item);
							}
							num++
						}
						that.loading = false;
					}, function(err) {
						console.log('返回错误回调', err)
						that.loading = false;
					})
			},
		}
	}
</script>

<style>
	@import url("../../common/uni.css");

	.marginBoxTop {
		display: flex;

		z-index: 0;
	}

	.box-top {
		display: flex;
		height: 50rpx;
		margin-top: -50rpx;
		z-index: 16;

	}

	.image-box {
		display: flex;
		flex-direction: column;
		width: 0rpx;
	}

	.image-content {
		height: 30vw;
		width: 30vw;
		border-radius: 15rpx;
	}
</style>